13. Execution Context
June 13, 2021
Execution Context
- 함수가 실행되는 영역이자 묶음
- 함수 코드를 실행하고, 실행 결과를 저장하기도 함
function music(title) {
var musicTitle = title;
}
music("음악");
- music() 함수를 호출하면 엔진은 실행 콘텍스트를 생성한다.
- 실행 콘텍스트가 생성되면, 콜스택에 쌓는다. 엔진은 항상 콜스택의 top을 수행하므로, 엔진은 music의 실행 콘텍스트 안으로 이동한다.
실행 컨텍스트의 상태 컴포넌트
- 상태(환경)을 저장하기 위한 3개의 컴포넌트가 있다.
- Lexical Environment
- Variable Environment
- This Binding
실행컨텍스트_EC : {
렉시컬환경컴포넌트_LEC : { },
변수환경컴포넌트_VEC : { },
This바인딩컴포넌트_TBC : { }
}
- 렉시컬 환경과 변수 환경은 초기 값이 같다.
- 렉시컬 환경은 정적환경이지만, 글로벌 환경과 동적 환경이 이 안에서 처리되기 때문에, 세부 값의 변경이 일어날 수 있다.
- 변수 환경은 복원을 위해 존재한다. 다시 돌아왔을 때 변수 환경의 값을 렉시컬 환경에 적용함으로써 초기값으로 돌아가기 위함이다.\
- This 바인딩 컴포넌트는 함수 안에서 this로 참조하는 오브젝트를 담는다.
obj.abc()라는 함수가 존재할 때, abc 함수 안에서 obj라는 객체를 this로 참조할 수 있다.
Execution Context 생성 시점
- 실행 가능한 코드를 만났을 때다.
- 실행 가능한 코드란 "함수 코드", "글로벌 코드", "eval()"이다.
- 함수코드는 함수 내부에 작성된 코드를 말한다.
- 글로벌 코드는, Global Object에 작성된 코드를 말한다.
- eval 코드는, eval의 인자로 들어간 문자열을 말한다.
- 위처럼 코드 유형을 분리한 이유는 엔진이 실행 콘텍스트로 처리하는 방법과 실행 환경이 다르기 때문이다.
- 함수코드는 렉시컬 환경을 갖는다.
- 글로벌코드는 글로벌 환경을 갖는다.
- eval 코드는 동적 환경을 갖는다.
Execution Context 실행까지 엔진의 동작 과정
var base = 200;
function getPoint(bonus){
var point = 100;
return point + base + bonus;
};
console.log(getPoint(70));
- 엔진은 선언문 처리 단계에서
function getPoint()를 만나게 되면서 getPoint라는 function Object를 생성한다.
- function Object의 내부 프로퍼티
[[Scope]]에 글로벌 오브젝트를 설정한다.
2. 선언문 처리 단계를 거치고 실행을 시작한다. getPoint가 호출되면서, 엔진은 실행 컨텍스트를 생성하고, 실행 컨텍스트 안으로 들어가면서 실행 컨텍스트 생성 단계를 거친다.
- 컴포넌트를 생성하여 실행 컨텍스트에 첨부한다.
- 렉시컬 환경 컴포넌트
- 변수 환경 컴포넌트
- this 바인딩 컴포넌트
- 환경 레코드를 생성하여, 렉시컬 환경 컴포넌트에 첨부한다.
- 실행 과정에서, 함수 안의 변수와 함수를 바인딩한다. 지금은 초기화 단계로 환경레코드는 빈 오브젝트다.
- 외부 렉시컬 환경 참조를 생성하여, 렉시컬 환경 컴포넌트에 첨부한다.
- 이때, getPoint function Object의 내부 프로퍼티
[[Scope]]에 있는 것을 외부 렉시컬 환경 참조에 넣는다.
- 복사가 아니라 참조다. 따라서, 함수 바깥에서 값이 바뀌면 실행컨텍스트에서도 값이 바뀐다.
여기까지 모습
실행컨텍스트 : {
렉시컬환경컴포넌트 : {
환경레코드 : {}
외부렉시컬환경참조 : {
base : 200
}
},
변수환경컴포넌트: {}
this바인딩컴포넌트 : {}
}
6. 컴포넌트 생성이 완료 되었으면, 실행 컨텍스트 초기화 단계를 시작한다.
- 호출한 함수의 파라미터 값을, 호출된 함수의 파라미터 이름에 매핑힌다.
70을 bonus에 맵핑한다. 그리고 이것을 환경 레코드에 작성한다.
- 함수 선언문을 만나면, function object로 생성하고 환경 레코드에 넣는다.
- 함소 표현식 처리를 시작하면서, 변수를 선언하게 된다.
여기까지 모습
실행컨텍스트 : {
렉시컬환경컴포넌트 : {
환경레코드 : {
bonus : 70,
point : undefined,
}
외부렉시컬환경참조 : {
base : 200
}
},
변수환경컴포넌트: {}
this바인딩컴포넌트 : {}
}
10. 이제 코드 실행단계에 돌입한다.
- 변수에 값을 할당하기도하고, 엔진은 함수 외부와 내부에 있는 변수에 대해 식별자 해결이 가능해졌으므로, 맘껏 사용 가능하다.
- 컨텍스트 하나가 메모리에 올라와 있으므로, 엔진은 메모리 안과 밖을 들락날락할 일이 없어 엔진 처리가 빨라진다.
